import Taro,{ Component,Config } from "@tarojs/taro";
import { View,Text  } from "@tarojs/components";
import { AtActivityIndicator } from "taro-ui";
import WxParse from "../../../components/wxParse/wxParse";
import './index.scss';

interface DetailsInter {
  id:number,
  title:string,
  content:string,
}
export default class Details extends Component {
  config:Config = {
    navigationBarTitleText:'详情'
  }
  state = {
    item:{},
  }
  componentWillMount(): void {
    const id = this.$router.params.id;
    console.log(id);
    Taro.cloud.callFunction({
      name:'https',
      data:{
        url:`https://cnodejs.org/api/v1/topic/${id}`,
      }
    }).then((res:{result})=>{
      const result = JSON.parse(res.result);
      this.setState({
        item:result.data
      })
      console.log(result.data);
    })
  }

  render() {
    const itemList:DetailsInter = this.state.item;
    WxParse.wxParse('article', 'html', itemList.content?itemList.content:'', this.$scope, 5)
    let value:JSX.Element[] | JSX.Element;
    if(itemList){
      value = (
        <View key={itemList.id}>
          <Text className='TextTitle'>{itemList.title}</Text>
          <import src='../../../components/wxParse/wxParse.wxml' />
          <template is='wxParse' data='{{wxParseData:article.nodes}}'/>
        </View>
      )
    }
    return (
      <View className='container'>
        {
          itemList.id?
          value:
          <AtActivityIndicator mode='center' content='加载中...'></AtActivityIndicator>
        }
      </View>
    )
  }
}
